@charset "UTF-8";

/*css reset*/
* {margin:0;padding:0; border:0; word-break:break-all; font-family:"微软雅黑",'Microsoft YaHei','华文黑体','STHeiti','宋体',helvetica, arial, verdana, sans-serif; font-size: 12px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0 none;}
address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul,li {list-style-type:none;}
li{display:block;}
capation,th{text-align:left;}
abbr,acronym{border:0;}
select,input,img{vertical-align:middle; }
a {text-decoration: none; font-weight:normal; cursor:pointer;}
b{ font-weight:bold; display:inline;}
input{height:auto; outline:none; vertical-align:bottom;+vertical-align:middle !important; _vertical-align:middle; line-height:normal}
textarea {resize: none;} /*6月14日更新，针对webkit核心的浏览器——Chrome(google浏览器),Safari(苹果浏览器)中textare可调整大小的问题定义. 取消拖动调整大小*/
textarea:focus {outline: none;} /*6月14日更新. textarea的聚焦时现在默认边框颜色不变*/
i, em, cite { font-style: normal; }

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*定位*/
.clear,.clearit{clear: both;margin: 0;padding: 0;}
.clearFix {display: block;}
.clearFix:after {clear: both;content: ".";display: block;height: 0;visibility: hidden;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.alc{text-align:center;}
.all{text-align:left;}
.alr{text-align:right;}
.vm{vertical-align:middle;}
.zoom{zoom:1}
.ct,.center{ margin:0px auto;}

.media .bd { vertical-align: baseline; display: table-cell; width: 10000px; *width: auto; *zoom: 1; }
.media .bd > :first-child { margin-top: 0; }
.media .bd > :last-child { margin-bottom: 0; }
.media .img { float: left; }
.media .img img { display: block; }
.media .bd img { display: block; }
.media .imgext { float: right; /*margin-left: 10px; */ }
.media .imgext img { display: block; }

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { content: "\20"; display: table; }
.clearfix:after { clear: both; }
.fn-left, .fn-right { display: inline; }
.fn-left { float: left; }
.fn-right { float: right; }


/* 页面部分 */
*{font-family:"Microsoft YaHei","微软雅黑","宋体";}
body{ background:#ccc; color:#000; overflow:hidden;}
a{ color:#fff;}
video{ background:#000;}

.wrap{ width:100%; height:100%; overflow:hidden; position:relative; z-index:1;}

#hand{ position:fixed; left:50%; bottom:16%; margin-left:-3.125%; width:6.25%; z-index:3; pointer-events:none;}
#hand img{ width:100%;}

#link{width:90%; padding:0px 5%; height:24px; border-top:1px solid #c2c2c2; background:#ededed; position: fixed; left:0px; bottom:50px; z-index:99;}
#link li{ line-height:24px; font-size:1em;}
#link li a{ color:#89725a; text-decoration:underline;}

#testbar{ width:100%; border-top:1px solid #c2c2c2; position: fixed; left:0px; bottom:50px; z-index:99; display:none;}
#testbar img{ width:100%;}


#loadBox{ position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50)\9; z-index:20;}
#loadBox p{ width:40px; height:40px; background:url(../images/common/loading.gif) no-repeat; background-size:contain; line-height:40px; font-size:10px; text-align:center; color:#fff; text-shadow:1px 1px 1px #333; position:absolute; left:50%; top:50%; margin-left:-20px; margin-top:-20px;}


.main{ position:absolute; left:0; top:0px; width:100%; z-index:1;}
.main .pages{ position:relative; width:100%; overflow:hidden;}



/* 产品亮点 css*/
.prdu a.btnView{ position:absolute; left:50%; bottom:11%; margin-left:-14%; width:28%;}
.prdu a.btnView img{ width:100%;}
.prdu img.slog{ position:absolute; left:50%; top:15%;}
.prdu img.slog1{ width:68%; margin-left:-34%; top:11%;}
.prdu img.slog2{ width:84%; margin-left:-42%;}
.prdu img.slog3{ width:84%; margin-left:-42%;}
.prdu img.slog4{ width:84%; margin-left:-42%;}
.prdu img.slog5{ width:84%; margin-left:-42%;}
.prdu img.slog6{ width:84%; margin-left:-42%;}

.focusPoint{ width:100%; height:100%; position: fixed; left:0; top:0; background:#191919; z-index:999; display:none;}
.focusPoint .boxBtnL{position:absolute; left:15px; top:32%; width:10%; height:15%; background: url(../images/common/ar1.png) left center no-repeat; background-size:contain; display:none;}
.focusPoint .boxBtnL.active{cursor:pointer; display:block;}
.focusPoint .boxBtnR{position:absolute; right:15px; top:32%; width:10%; height:15%; background: url(../images/common/ar2.png) right center no-repeat; background-size:contain; display:none;}
.focusPoint .boxBtnR.active{cursor:pointer; display:block;}
.focusPoint .boxMask{position:absolute; left:0px; top:0px; overflow:hidden;}
.focusPoint .boxMask ul{ position:absolute;}
.focusPoint .boxMask ul li{float:left; display:inline-block; overflow-x:hidden; overflow-y:auto;}
.focusPoint .boxMask ul li img{ width:100%;}
.focusPoint .boxMask ul li img:first-child{ margin-top:10%; margin-bottom:5px;}
.focusPoint a.close{position:absolute; right:0px; top:0px; width:10%; height:10%; background: url(../images/common2/close.png) right top no-repeat; background-size:contain;}



/* 弹窗 css*/
.popBox{position:fixed; left:0px; top:0px; z-index:999;}
.popBox .popMask {display:block;  background:#000\9; filter:alpha(opacity=50)\9; background:rgba(0,0,0,0.5);}

.popPoint{ width:100%; height:100%; background:#000; position:absolute; display:none;}
.popPoint .close{ position:absolute; right:20px; top:20px; width:45px; height:49px; background: url(../images/common2/close.png) center center no-repeat; background-size:contain; overflow:hidden; cursor:pointer;}

.popPic{ width:790px; height:560px; background:#fff; position:absolute; box-shadow:0px 0px 10px #333; display:none;}
.popPic p{}
.popPic p img{ width:790px; height:560px;}
.popPic .close{ position:absolute; right:0px; top:0px; width:32px; height:32px; background: url(../images/common2/close.png) center center no-repeat; background-size:contain; overflow:hidden; cursor:pointer;}

.popLoad{ width:100%; height:100%; left:0; top:0; opacity:0.5; background:#000; position:fixed; z-index:9999; display:none;}
.popLoad p{position:absolute; left:50%; top:50%; margin-left:-15px; margin-top:-15px; width:30px; height:30px; background:url(../images/iphone/loading.gif) center center no-repeat; background-size:contain; line-height:30px; text-align:center; color:#000;  font-size:0.5em; }


.popVideo{ width:100%; height:100%; background:#000; position:fixed; left:0; top:0; display:none; z-index:999;}
.popVideo .close{ position:absolute; right:20px; top:20px; width:70px; height:70px; background: url(../images/common2/close.png) center center no-repeat; overflow:hidden; cursor:pointer;}
#videoBox{ width:100%; height:100%;}

.popIpad{width:100%; height:100%; background:#000; position:fixed; left:0; top:0; display:none; z-index:999;}
.popIpad .video{ width:100%; height:84%; margin:8% auto;}
.popIpad .video video{ width:100%; height:100%;}
.popIpad .close{position:absolute; right:20px; top:20px; width:30px; height:30px; background: url(../images/common/close.png) center center no-repeat; background-size:contain; display:block; z-index:99;}

#turnBox{ width:100%; height:100%; background:#131313; position:fixed; left:0; top:0; z-index:99999; display:none; opacity:0.8;}
#turnBox span{ position:absolute; display:block; left:50%; top:50%; margin-left:-100px; margin-top:-69px; width:200px; height:138px;}

.page0 { z-index:5; width:100%;}
.page1 { background:url(../images/bg2.jpg) no-repeat; background-size:100% auto; z-index:6; width:100%;}
.page2 { background: #000; z-index:7; width:100%;}
.page3 { background: #000; z-index:8; width:100%;}
.page4 { background:url(../images/bg3.jpg) no-repeat; background-size:100% auto; z-index:9; width:100%;}
.page5 { background:url(../images/bg4.jpg) no-repeat; background-size:100% auto; z-index:10; width:100%;}
.page6 { background:url(../images/bg4.jpg) no-repeat; background-size:100% auto; z-index:11; width:100%;}

img { width:100%;}

.header_t{position: fixed;left: 0px;top: 0px;z-index: 135;}
.header_t .td_but{position: absolute;left: 0px;bottom: 0px;}

.down_ic{width: 100%;left: 0px;bottom:4%;position: fixed;z-index: 103;}
.down_ic .ya_img{width: 2%;margin: 0 auto;position: relative;}
.down_ic .ya_img img{position: absolute;left:0px;
    animation:yada 2s infinite;
    -moz-animation:yada 2s infinite; /* Firefox */
    -webkit-animation:yada 2s infinite; /* Safari and Chrome */
}
@keyframes yada
{
    0%   {top: -55px;}
    50% {top: -35px;}
    100%   {top: -55px;}
}
@-moz-keyframes yada /* Firefox */
{
    0%   {top: -55px;}
    50% {top: -35px;}
    100%   {top: -55px;}
}

@-webkit-keyframes yada /* Safari and Chrome */
{
    0%   {top: -55px;}
    50% {top: -35px;}
    100%   {top: -55px;}
}

.mainkv,.mainkv2{
    left: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 100%;
    height: 82%;
}

.mainkv .slider {
    width: 100%;
    height: 100%;
}

.mainkv .slider .item {
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
    background: #000;
}
.iosSliderButtons {
    position: absolute;
    bottom: 22%;
    left: 0px;
    width: 100%;
    height: 1%;
}
.center_area{
    width: 33%;
    height: 100%;
    left: 36%;
    position: absolute;
}
.center_area .button {
    float: left;
    width: 4%;
    height: 100%;
    background: #969696;
    margin-right: 14.5% ;
    border: 1px solid #969696;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
.center_area .button.last{margin-right: 0px!important;}
.iosSliderButtons .selected {
    background: #2fa33b;
    opacity: 1;
    border: 1px solid #2fa33b;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
.next {
    position: absolute;
    top: 46%;
    right: 1%;
    width: 3.2%;
    animation:nextanme 2s infinite;
    -moz-animation:nextanme 2s infinite; /* Firefox */
    -webkit-animation:nextanme 2s infinite; /* Safari and Chrome */
}

.prev {
    position: absolute;
    top: 46%;
    left: 1%;
    width: 3.2%;
    animation:prevanme 2s infinite;
    -moz-animation:prevanme 2s infinite; /* Firefox */
    -webkit-animation:prevanme 2s infinite; /* Safari and Chrome */
}
@keyframes nextanme
{
    0%   {right: 0px;}
    50%   {right: 2%;}
    100%   {right: 0px;}
}
@-moz-keyframes nextanme /* Firefox */
{
    0%   {right: 0px;}
    50%   {right: 2%;}
    100%   {right: 0px;}
}

@-webkit-keyframes nextanme /* Safari and Chrome */
{
    0%   {right: 0px;}
    50%   {right: 2%;}
    100%   {right: 0px;}
}
@keyframes prevanme
{
    0%   {left: 0px;}
    50%   {left: 2%;}
    100%   {left: 0px;}
}
@-moz-keyframes prevanme /* Firefox */
{
    0%   {left: 0px;}
    50%   {left: 2%;}
    100%   {left: 0px;}
}

@-webkit-keyframes prevanme /* Safari and Chrome */
{
    0%   {left: 0px;}
    50%   {left: 2%;}
    100%   {left: 0px;}
}
.kilink{position: absolute;left:0px;top:9%;}




.video_main_area {
    width: 91%;
    height: 30%;
    padding-bottom: 3%;
    margin: 0 auto;
	display:block;
}




.mainkv3{
    left: 0;
    /*overflow: hidden;*/
    position: relative;
    top: 0;
    width: 100%;
    height: 30%;
	min-height:290px;
}

.mainkv .slider {
    width: 100%;
    height: 100%;
}

.mainkv .slider .item {
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
}
.mainkv3 .iosSliderButtons {
    position: absolute;
    bottom: 3%;
    left: 0px;
    width: 100%;
    height: 2%;
}
.mainkv3 .center_area{
    width: 33%;
    height: 100%;
    left: 36%;
    position: absolute;
}
.mainkv3 .center_area .button {
    float: left;
    width: 3%;
    height: 100%;
    background: #969696;
    margin-right: 12% ;
    border: 1px solid #969696;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
.center_area .button.last{margin-right: 0px!important;}
.mainkv3 .iosSliderButtons .selected {
    background: #2fa33b;
    opacity: 1;
    border: 1px solid #2fa33b;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
.mainkv3 .next {
    position: absolute;
    top: 32%!important;
    right: 1%;
    width: 3.2%;
    animation:nextanme 2s infinite;
    -moz-animation:nextanme 2s infinite; /* Firefox */
    -webkit-animation:nextanme 2s infinite; /* Safari and Chrome */
}

.mainkv3 .prev {
    position: absolute;
    top: 30%!important;
    left: 1%;
    width: 3.2%;
    animation:prevanme 2s infinite;
    -moz-animation:prevanme 2s infinite; /* Firefox */
    -webkit-animation:prevanme 2s infinite; /* Safari and Chrome */
}




.mainkv4{
    margin-top: 5%;
    left: 0;
    /*overflow: hidden;*/
    position: relative;
    top: 0;
    width: 100%;
    height: 43%;
}

.mainkv4 .slider {
    width: 100%;
    height: 100%;
}

.mainkv4 .slider .item {
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
}
.mainkv4 .slider .item .im_link{
    position: relative;
    width: 100%;
    height: 100%;
}
.mainkv4 .slider .item .im_link a{
    width: 50%;
    height: 45%;
    position: absolute;
    display: block;
}
.mainkv4 .slider .item .im_link .a1{
    left: 0px;
    top: 0px;
}
.mainkv4 .slider .item .im_link .a2{
    right: 0px;
    top: 0px;
}
.mainkv4 .slider .item .im_link .a3{
    left: 0px;
    top: 46%;
}
.mainkv4 .slider .item .im_link .a4{
    right: 0px;
    top: 46%;
}
.mainkv4 .iosSliderButtons {
    position: absolute;
    bottom: 1%;
    left: 0px;
    width: 100%;
    height: 1.5%;
}
.mainkv4 .center_area{
    width: 33%;
    height: 100%;
    left: 41%;
    position: absolute;
}
.mainkv4 .center_area .button {
    float: left;
    width: 3%;
    height: 100%;
    background: #969696;
    margin-right: 12% ;
    border: 1px solid #969696;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
.mainkv4 .center_area .button.last{margin-right: 0px!important;}
.mainkv4 .iosSliderButtons .selected {
    background: #2fa33b;
    opacity: 1;
    border: 1px solid #2fa33b;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
.mainkv4 .next {
    position: absolute;
    top: 38%!important;
    right: 1%;
    width: 3.2%;
    animation:nextanme 2s infinite;
    -moz-animation:nextanme 2s infinite; /* Firefox */
    -webkit-animation:nextanme 2s infinite; /* Safari and Chrome */
    z-index: 50;
}

.mainkv4 .prev {
    position: absolute;
    top: 38%!important;
    left: 1%;
    width: 3.2%;
    animation:prevanme 2s infinite;
    -moz-animation:prevanme 2s infinite; /* Firefox */
    -webkit-animation:prevanme 2s infinite; /* Safari and Chrome */
    z-index: 50;
}






.back{margin-top: 30%;}
.hd_ar1,.hd_ar2{
    margin-top: 5%;
    left: 0;
    /*overflow: hidden;*/
    position: relative;
    top: 0;
    width: 100%;
    height: 43%;
}

.hd_ar1 .slider,.hd_ar2 .slider {
    width: 100%;
    height: 100%;
}

.hd_ar1 .slider .item,.hd_ar2 .slider .item {
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
}
.hd_ar1 .slider .item .im_link,.hd_ar2 .slider .item .im_link{
    position: relative;
    width: 100%;
    height: 100%;
}
.hd_ar1 .slider .item .im_link a,.hd_ar2 .slider .item .im_link a{
    width: 50%;
    height: 45%;
    position: absolute;
    display: block;
}
.hd_ar1 .slider .item .im_link .a1,.hd_ar2 .slider .item .im_link .a1{
    left: 0px;
    top: 0px;
}
.hd_ar1 .slider .item .im_link .a2,.hd_ar2 .slider .item .im_link .a2{
    right: 0px;
    top: 0px;
}
.hd_ar1 .slider .item .im_link .a3,.hd_ar2 .slider .item .im_link .a3{
    left: 0px;
    top: 46%;
}
.hd_ar1 .slider .item .im_link .a4,.hd_ar2 .slider .item .im_link .a4{
    right: 0px;
    top: 46%;
}
.hd_ar1 .iosSliderButtons,.hd_ar2 .iosSliderButtons {
    position: absolute;
    bottom: 1%;
    left: 0px;
    width: 100%;
    height: 1.5%;
}
.hd_ar1 .center_area,.hd_ar2 .center_area{
    width: 33%;
    height: 100%;
    left: 47%;
    position: absolute;
}
.hd_ar1 .center_area .button,.hd_ar2 .center_area .button {
    float: left;
    width: 3%;
    height: 100%;
    background: #969696;
    margin-right: 12% ;
    border: 1px solid #969696;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
.hd_ar1 .center_area .button.last,.hd_ar2 .center_area .button.last{margin-right: 0px!important;}
.hd_ar1 .iosSliderButtons .selected,.hd_ar2 .iosSliderButtons .selected {
    background: #2fa33b;
    opacity: 1;
    border: 1px solid #2fa33b;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
.hd_ar1 .next,.hd_ar2 .next {
    position: absolute;
    top: 38%!important;
    right: 1%;
    width: 3.2%;
    animation:nextanme 2s infinite;
    -moz-animation:nextanme 2s infinite; /* Firefox */
    -webkit-animation:nextanme 2s infinite; /* Safari and Chrome */
    z-index: 50;
}

.hd_ar1 .prev,.hd_ar2 .prev {
    position: absolute;
    top: 38%!important;
    left: 1%;
    width: 3.2%;
    animation:prevanme 2s infinite;
    -moz-animation:prevanme 2s infinite; /* Firefox */
    -webkit-animation:prevanme 2s infinite; /* Safari and Chrome */
    z-index: 50;
}




.jqqd{
    width: 90%;
    margin: 0 auto;
}

.justhd{
    width: 86%;
    margin: 10% auto 0;
    box-shadow: #b1b1b1 0px 0px 15px;
}

.justhd_ar1,.justhd_ar2{display: none;position: absolute;left: 0px;top:0px;z-index: 130;background: url("../images/bg4.jpg") no-repeat;}

.footer  {width:100%;position:absolute;bottom:0px;left:0px;z-index:9999; }
.footer img { width:100%; }

/*.page0{-webkit-filter:grayscale(1);}*/
/*.active.page0{*/
    /*-webkit-filter:grayscale(0);*/
    /*animation:dddd 2s;*/
    /*-moz-animation:dddd 2s; *//* Firefox */
    /*-webkit-animation:dddd 2s; *//* Safari and Chrome */
/*}*/
/*.activet.page0{*/
    /*-webkit-filter:grayscale(1);*/
    /*animation:ccc 2s;*/
    /*-moz-animation:ccc 2s; *//* Firefox */
    /*-webkit-animation:ccc 2s; *//* Safari and Chrome */
/*}*/


/*@keyframes dddd*/
/*{*/
    /*0%   {-webkit-filter:grayscale(1)}*/
    /*100%   {-webkit-filter:grayscale(0)}*/
/*}*/
/*@-moz-keyframes dddd *//* Firefox */
/*{*/
    /*0%   {-webkit-filter:grayscale(1)}*/
    /*100%   {-webkit-filter:grayscale(0)}*/
/*}*/

/*@-webkit-keyframes dddd *//* Safari and Chrome */
/*{*/
    /*0%   {-webkit-filter:grayscale(1)}*/
    /*100%   {-webkit-filter:grayscale(0)}*/
/*}*/

/*@keyframes ccc*/
/*{*/
    /*0%   {-webkit-filter:grayscale(0)}*/
    /*100%   {-webkit-filter:grayscale(1)}*/
/*}*/
/*@-moz-keyframes ccc *//* Firefox */
/*{*/
    /*0%   {-webkit-filter:grayscale(0)}*/
    /*100%   {-webkit-filter:grayscale(1)}*/
/*}*/

/*@-webkit-keyframes ccc *//* Safari and Chrome */
/*{*/
    /*0%   {-webkit-filter:grayscale(0)}*/
    /*100%   {-webkit-filter:grayscale(1)}*/
/*}*/



}
/*media*/
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 641px) {

}
@media screen and (max-width: 481px) {

}
@media screen and (max-width: 415px) {

}
@media screen and (max-width: 376px) {

}
@media screen and (max-width: 361px) {

}
@media screen and (max-width: 321px) {

}
/* iphone4 */
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){

}

/* iphone5 */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){

}
/* note */
@media screen and (device-width: 400px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2){

}



